<template>
  <breadCrumb ref="breadcrumb" :item='item'></breadCrumb>
  <!-- wrapper -->
  <div class="module-common-wrapped">
    <div class="module-common-content">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- 产品列表 -->
        <el-tab-pane label="产品列表" name="first">
          <div class="pane-content">
            <div class="pane-top">
              <div class="module-common-header">
                <div class="search-wrapped">
                  <el-input v-model="productId" class="w-50 m-2" size="large" placeholder="输入入库编号进行搜索"
                    :prefix-icon="Search" @change="searchProductByProductId()" clearable />
                </div>
                <div class="button-wrapped">
                  <el-button type="primary" @click="goInProduct">产品入库</el-button>
                </div>
              </div>
              <!-- 表格部分 -->
              <div class="module-common-table">
                <el-table :data="tableData" border style="width: 100%">
                  <el-table-column type="index" width="50" :index="indexMethod"></el-table-column>
                  <el-table-column prop="product_id" label="入库编号" width="100" />
                  <el-table-column prop="product_name" label="产品名称" width="120" />
                  <el-table-column prop="product_category" label="产品类别" width="100" />
                  <el-table-column prop="product_unit" label="单位" />
                  <el-table-column prop="product_in_warehouse_number" label="库存数量" width="100" />
                  <el-table-column prop="product_single_price" label="产品单价" width="150" />
                  <el-table-column prop="product_all_price" label="库存总价" width="100" />
                  <el-table-column prop="product_status" label="库存状态" width="100">
                    <template #default="{ row }">
                      <el-tag class="ml-2" type="danger" v-if="row.product_in_warehouse_number <= 100">库存较少</el-tag>
                      <el-tag class="ml-2" type="primary"
                        v-else-if="row.product_in_warehouse_number > 100 && row.product_in_warehouse_number <= 300">库存正常</el-tag>
                      <el-tag class="ml-2" type="success"
                        v-else-if="row.product_in_warehouse_number > 300">库存过剩</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="product_create_person" label="入库负责人" width="150" />
                  <el-table-column prop="product_create_time" label="入库时间" width="200">
                    <template #default="{ row }">
                      <div>{{ row.product_create_time?.slice(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="product_update_time" label="最后修改时间" width="200">
                    <template #default="{ row }">
                      <div>{{ row.product_update_time?.slice(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="in_memo" label="入库备注" width="200" />
                  <el-table-column label="操作" width="300" fixed="right">
                    <template #default="{ row }">
                      <div>
                        <el-button type="primary" @click="goApplyOut(row)">申请出库</el-button>
                        <el-button type="success" @click="goEditProduct(row)">修改</el-button>
                        <el-button type="danger" @click="goDeleteProduct(row)">删除</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="table-footer">
              <el-pagination size="small" background :total="listTotal" :page-size="paginationData.pageSize"
                :current-page="paginationData.currentPage" @current-change="goChangePage" layout="prev, pager, next" />
            </div>
          </div>
        </el-tab-pane>
        <!-- 审核列表 -->
        <el-tab-pane label="审核列表" name="second">
          <div class="pane-content">
            <div class="pane-top">
              <div class="module-common-header">
                <div class="search-wrapped">
                  <el-input v-model="productOutId" class="w-50 m-2" size="large" clearable placeholder="输入出库编号进行搜索"
                    :prefix-icon="Search" />
                </div>
                <div class="button-wrapped">
                </div>
              </div>
              <!-- 表格部分 -->
              <div class="module-common-table">
                <el-table :data="applyTableData" border style="width: 100%">
                  <el-table-column type="index" width="50" :index="applyIndexMethod"></el-table-column>
                  <el-table-column prop="product_out_id" label="申请出库编号" width="110" />
                  <el-table-column prop="product_name" label="产品名称" width="100" />
                  <el-table-column prop="product_out_number" label="申请出库数量" width="110" />
                  <el-table-column prop="product_out_price" label="申请出库总价" width="110" />
                  <el-table-column prop="product_out_apply_person" label="申请人" width="150" />
                  <el-table-column prop="product_apply_time" label="申请出库时间" width="110">
                    <template #default="{ row }">
                      <div>{{ row.product_apply_time?.slice(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="product_out_audit_person" label="审核人" width="150" />
                  <el-table-column prop="product_audit_time" label="审核时间" width="180">
                    <template #default="{ row }">
                      <div>{{ row.product_audit_time?.slice(0, 10) }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="product_out_status" label="审核状态" width="100" />
                  <el-table-column prop="apply_memo" label="申请出库备注" width="200" />
                  <el-table-column prop="audit_memo" label="审核备注" width="200" />
                  <el-table-column label="操作" width="300" fixed="right">
                    <template #default="{ row }">
                      <div>
                        <el-button type="primary" @click="goWithdrawApply(row)">撤回申请</el-button>
                        <el-button type="success" :disabled="row.product_out_status === '申请出库'"
                          @click="goAgainApply(row)">再次申请</el-button>
                        <el-button type="danger" @click="goAuditProduct(row)">审核</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div class="table-footer">
              <el-pagination size="small" background :total="applyTotal" :page-size="paginationData.applyPageSize"
                :current-page="paginationData.applyCurrentPage" @current-change="goChangeApplyPage"
                layout="prev, pager, next" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  <!-- 入库弹窗 -->
  <in_product ref="inProductRef" :getProductList="getProductList"></in_product>
  <!-- 申请出库弹窗 -->
  <apply_out_product ref="applyOutProductRef" :getProductList="getProductList">
  </apply_out_product>
  <!-- 编辑产品弹窗 -->
  <edit_product ref="editProductRef" :getProductList="getProductList"></edit_product>
  <!-- 删除产品弹窗 -->
  <delete_product ref="deleteProductRef" :getProductList="getProductList"></delete_product>
  <!-- 审核弹窗 -->
  <audit_product ref="auditProductRef" :GetProductApplyitList="GetProductApplyitList"></audit_product>
  <!-- 撤回申请弹窗 -->
  <withdraw_apply ref="withdrawApplyRef" :getProductList="getProductList"
    :GetProductApplyitList="GetProductApplyitList">
  </withdraw_apply>
  <again_apply ref="againApplyRef" :refreshData="refreshData">
  </again_apply>

</template>
<script lang="ts" setup>
import breadCrumb from "../../../components/breadCrumb.vue"
import { ref, reactive } from "vue"
import { Search } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
import in_product from "../components/in_product.vue"
import { GetProductListAPI, SearchProductByProductIdAPI, GetProductApplyitListAPI, GetProductListByPagerAPI, GetProductTotalAPI, GetApplyProductTotalAPI, GetApplyProductListByPagerAPI } from '../../../api/product'
import { bus } from "../../../utils/mitt.js"
import apply_out_product from '../components/apply_out_product.vue'
import edit_product from '../components/edit_product.vue'
import delete_product from '../components/delete_product.vue'
import audit_product from '../components/audit_product.vue'
import withdraw_apply from "../components/withdraw_apply.vue"
import again_apply from "../components/again_apply.vue"


const breadcrumb = ref()
const item = ref({
  first: '用户管理',
  second: '产品列表'
})

const handleClick = (tab: TabsPaneContext) => {
  if (tab.props.label == '产品列表') {
    item.value.second = '产品列表'
    getProductList()
  }
  if (tab.props.label == '审核列表') {
    item.value.second = '审核列表'
    GetProductApplyitList()
  }
}

const activeName = ref('first')

// 产品编号
const productId = ref('')
// 产品表格
const tableData = ref([])
// 出库编号
const productOutId = ref('')
// 申请出库中的产品数据表格
const applyTableData = ref([])


// 打开入库弹窗
const inProductRef = ref()
const goInProduct = () => {
  inProductRef.value.open()
}

// 获取所有产品数据
// const getProductList = async () => {
//   const res = await GetProductListAPI()

//   if (res.data.status == 0) {
//     tableData.value = res.data.data
//   }
// }
// getProductList()

// 分页数据
const paginationData = reactive({
  currentPage: 1,
  pageSize: 5,
  applyCurrentPage: 1,
  applyPageSize: 5,
})

// 获取第一页的产品数据
const getProductList = async () => {
  paginationData.currentPage = 1
  const res = await GetProductListByPagerAPI(paginationData.currentPage)
  if (res.data.status == 0) {
    tableData.value = res.data.data
  }
}
getProductList()


// 产品总数
const listTotal = ref()
const GetProductTotal = async () => {
  const res = await GetProductTotalAPI()
  listTotal.value = res.data.data

}
GetProductTotal()

// 产品列表换页
const goChangePage = async (pager: number) => {
  paginationData.currentPage = pager
  const res = await GetProductListByPagerAPI(paginationData.currentPage)
  tableData.value = res.data.data
}

// 表的索引
const indexMethod = (index) => {
  return index + (paginationData.currentPage - 1) * 5 + 1
}

// 获取正在申请中的产品总数
const applyTotal = ref()
const GetApplyProductTotal = async () => {
  const res = await GetApplyProductTotalAPI()
  applyTotal.value = res.data.data
}
GetApplyProductTotal()


// 获取第一页正在申请中的数据
const GetProductApplyitList = async () => {
  const res = await GetApplyProductListByPagerAPI(1)
  applyTableData.value = res.data.data
}

// 
const goChangeApplyPage = async (pager: number) => {
  paginationData.applyCurrentPage = pager
  const res = await GetApplyProductListByPagerAPI(paginationData.applyCurrentPage)
  applyTableData.value = res.data.data
}

// 表的索引
const applyIndexMethod = (index) => {
  return index + (paginationData.applyCurrentPage - 1) * 5 + 1
}

// 刷新时重置数据
const refreshData = () => {

  getProductList()
  GetApplyProductTotal()
  GetProductApplyitList()
}




// 获取所有在申请中的数据
// const GetProductApplyitList = async () => {
//   const res = await GetProductApplyitListAPI()
//   if (res.data.status == 0) {
//     applyTableData.value = res.data.data
//   }
// }


// 打开申请出库弹窗   
const applyOutProductRef = ref()
const goApplyOut = (row) => {
  bus.emit('applyProductInfo', row)
  applyOutProductRef.value.open()
}

// 打开编辑产品弹窗
const editProductRef = ref()
const goEditProduct = (row) => {
  bus.emit('editProductInfo', row)
  editProductRef.value.open()
}

// 打开删除产品弹窗
const deleteProductRef = ref()
const goDeleteProduct = (row) => {
  bus.emit('deleteId', row)
  deleteProductRef.value.open()
}


// 根据入库时的产品编号搜索产品
const searchProductByProductId = async () => {
  const res = await SearchProductByProductIdAPI(productId.value)
  tableData.value = res.data.data
  if (productId.value == '') {
    getProductList()
  }
}

// 打开审核弹窗
const auditProductRef = ref()
const goAuditProduct = (row) => {
  bus.emit('auditProductInfo', row)
  auditProductRef.value.open()
}

// 打开撤销审核弹窗
const withdrawApplyRef = ref()
const goWithdrawApply = (row) => {
  bus.emit('withdrawId', row.id)
  withdrawApplyRef.value.open()
}

// 再次申请
const againApplyRef = ref()
const goAgainApply = (row) => {
  bus.emit('againInfo', row)
  againApplyRef.value.open()
}

</script>
<style lang="scss" scoped>
.module-common-wrapped {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.module-common-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

  .search-wrapped {
    width: 100%;
    margin-right: 30px;
  }

  .button-wrapped {
    margin-right: 10px;
  }
}

.table-wrapped {
  width: 100%;
  height: calc(100% - 100px);
  overflow: auto;
  padding: 0 20px;
  box-sizing: border-box;

  .table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.table-footer {
  margin-top: 20px;
}
</style>